<script setup>
import AsideCom from '../components/AsideCom.vue';
import HeaderCom from '../components/HeaderCom.vue';
import { ArrowRight } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia';
import { useNavigationStore } from '@/stores'
const { isCollapse, asideWidth, pageBreagCrumb} = storeToRefs(useNavigationStore())
// 从localStore拿到user数据
const user = JSON.parse(localStorage.getItem('userInfo')?localStorage.getItem('userInfo'):'{"nickname":"null","avatarUrl":"https://blog.znxs.vip/znxs/1E228F4E1015CF258706A7F3602F213C.jpg"}');
</script>
<template>
    <el-container class="layout-container-demo" style="height: 100vh; ">
        <!-- menu -->
        <el-aside :width="asideWidth + 'px'" overflow-x="hidder" style="box-shadow=2px 0 6px rgb(0 21 41 /35%)">
            <AsideCom :isCollapse="isCollapse" :asideWidth="asideWidth" :menus="user.menus"/>
        </el-aside>


        <!-- title -->
        <el-container>
            <!-- header -->
            <el-header style="text-align: right; font-size: 12px; border-bottom: 1mm solid rgb(89, 132, 174)">
                <HeaderCom :navigationStore="useNavigationStore()" :user="user" />
            </el-header>

            <!-- 页签(面包屑) -->
            <el-breadcrumb :separator-icon="ArrowRight" style="text-align: center;margin: 20px 0 20px 20px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ pageBreagCrumb  }}</el-breadcrumb-item>
            </el-breadcrumb>


            <!-- 用户信息展示 -->
            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>
    </el-container>
</template>

<style scoped>
.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: rgb(47, 65, 86);
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .el-header {
    position: relative;
    color: var(--el-text-color-primary);
}

.layout-container-demo .toolbar {
    height: 100%;
    right: 20px;
}

.layout-container-demo .el-menu {
    border-right: none;
}
</style>